<script>
import echarts from "@/utils/echarts";
import { getWeekWordCount } from "@/api/charts";

export default {
  name: 'HistogramChart',
  data() {
    return {
      option: {
        title: {
          text: '📊 最近七天默写情况',
          left: 'center',
          top: 10,
          textStyle: {
            color: '#333',
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '6%',
          right: '8%',
          bottom: '5%',
          top: 60,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f0f0f0'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            color: '#333',
            fontSize: 13,
            lineHeight: 20
          }
        },
        series: [
          {
            name: '默写单词个数',
            type: 'bar',
            data: [],
            barWidth: 18,
            itemStyle: {
              borderRadius: [0, 6, 6, 0],
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: '#5b8ff9' },
                { offset: 1, color: '#61ddaa' }
              ])
            },
            label: {
              show: true,
              position: 'right',
              color: '#333',
              fontSize: 12,
              formatter: '{c} 个'
            }
          }
        ],
        animationDuration: 1000,
        animationEasing: 'cubicOut'
      }
    }
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.main;
      if (!chartDom) return;
      this.myChart = echarts.init(chartDom);
      this.myChart.setOption(this.option);
    },
    //获取图表数据
    loadChartData() {
      getWeekWordCount().then(res => {
        const data = res.data.data;
        const yAxisData = [];
        const seriesData = [];

        for (let i = 0; i < data.length; i++) {
          const date = data[i].date.join('-');
          yAxisData.push(`${data[i].dayOfWeek}\n${date}`);
          seriesData.push(data[i].total);
        }

        this.option.yAxis.data = yAxisData;
        this.option.series[0].data = seriesData;

        if (this.myChart) {
          this.myChart.setOption(this.option);
        }
      }).catch(err => {
        console.error('获取图表数据失败:', err);
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.loadChartData();
    });
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
}
</script>

<template>
  <div>
    <div  ref="main" style="width: 100%; height: 500px;"></div>
  </div>
</template>

<style scoped>

</style>
